<script setup>
const props = defineProps({
  loading: {
    type: Boolean,
    default: true,
  },
  list: {
    type: Object,
    default: [],
  },
});
const go = (url) => {
  window.open(url, '_blank');
};
</script>

<template>
  <ul>
    <el-skeleton :loading="props.loading" animated>
      <template #template>
        <li v-for="item in 10" :key="item">
          <el-skeleton-item variant="text"/>
        </li>
      </template>
      <template #default>
        <li v-for="(item, index) in props.list" :key="index" @click="go(item.url)">
          <span class="index">
            {{ index + 1 }}
          </span>
          <span>{{ item.keyword }}</span>
        </li>
      </template>
    </el-skeleton>
  </ul>
</template>

<style scoped lang="less">
ul {
  margin-top: 10px;
  list-style: none;

  li {
    cursor: pointer;
    margin-bottom: 20px;
    padding: 5px;
    height: 100%;
    font-size: 13px;

    &:first-child .index {
      background-color: #FE2D46;
    }

    &:nth-child(2) .index {
      background-color: #FF6600;
    }

    &:nth-child(3) .index {
      background-color: #FAA90E;
    }

    &:hover {
      background-color: var(--hover-color);
      border-radius: 3px;
    }

    span {
      color: var(--text-color);
    }

    .index {
      width: 20px;
      height: 20px;
      line-height: 20px;
      color: #fff;
      text-align: center;
      background-color: #7f7f8c;
      margin-right: 10px;
      display: inline-block;
    }
  }
}
</style>